<template>
    <div class="box">
        <!-- 头部 -->
        <div class="header_box">
            <HeaderView @router="router">
                <template v-slot:center>
                    <div class="header_box_main">
                        <van-tabs type="card" @click="toMyReply">
                            <van-tab title="顾客评价"></van-tab>
                            <van-tab title="我的评价"></van-tab>
                        </van-tabs>
                    </div>
                </template>
                <template v-slot:right>
                    <div @click="selectDate">
                        <van-icon name="calendar-o"/>
                    </div>
                </template>
            </HeaderView>
        </div>

        <!-- 评分 -->
        <div class="table_div">
            <div class="left">
                <span class="score">{{score}}</span>
                <div>
                    <van-rate v-model="score"/>
                    <p class="score_text">根据最近90天评论计算所得</p>
                </div>
            </div>
            <div class="right">
                <span class="score_text more">
                    <a @click="toMore">更多</a>
                    <van-icon name="arrow" />
                </span>
            </div>

        </div>

        <!-- 联合查询 -->
        <div class="select_div"> 
            <van-tabs v-model="active">
                <van-tab title="未回复的评价">
                    <div class="btn_div">
                        <button class="searchBtn" :class="{active:btnActive == 0}" @click="changeStatus(0)">全部{{noReply}}</button>
                        <button class="searchBtn" :class="{active:btnActive == 5}" @click="changeStatus(5)">五星{{noFive}}</button>
                        <button class="searchBtn" :class="{active:btnActive == 4}" @click="changeStatus(4)">四星{{noFour}}</button>
                        <button class="searchBtn" :class="{active:btnActive == 3}" @click="changeStatus(3)">三星{{noThree}}</button>
                        <button class="searchBtn" :class="{active:btnActive == 2}" @click="changeStatus(2)">二星{{noTwo}}</button>
                        <button class="searchBtn" :class="{active:btnActive == 1}" @click="changeStatus(1)">一星{{noOne}}</button>
                    </div>
                    <van-radio-group v-model="noRadio" direction="horizontal" class="selectRadio">
                        <van-radio name="1">有内容的评价</van-radio>
                        <van-radio name="2">有图片的评价</van-radio>
                    </van-radio-group>

                    <!-- 评论区 -->
                    <div class="list">
                        <div class="item" v-for="item in reply" :key="item.id">
                            <div class="item_header">
                                <div class="left">
                                    <!-- <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""> -->
                                    <van-image
                                            round
                                            width="1rem"
                                            height="1rem"
                                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                            fit="cover"
                                            class="card_img"
                                    />
                                    <div>
                                        <p>匿名用户</p>
                                        <p>{{item.replytime}}</p>
                                    </div>
                                </div>
                                <div class="right" @click="todetail(item.id)">
                                    <p>详情
                                        <van-icon name="arrow" />
                                    </p>
                                </div>
                            </div>
                            <div class="item_main">
                                <p class="lightFont">
                                    商家：<van-rate v-model="item.score" />
                                </p>
                                <p class="lightFont">
                                    推荐：{{item.recommend}}
                                </p>
                                <p>
                                    <!-- 评论 -->
                                    {{item.Comments}}
                                </p>
                                <ul class="item_imgList">
                                    <li>
                                        <img :src="item.src1" alt="" class="item_img">
                                    </li>
                                    <li>
                                        <img :src="item.src2" alt="" class="item_img">
                                    </li>
                                    <li>
                                        <img :src="item.src3" alt="" class="item_img">
                                    </li>
                                    <li>
                                        <img :src="item.src4" alt="" class="item_img">
                                    </li>
                                </ul>
                                <div class="respBtn">
                                    <van-button color="#ff6e53" plain  @click="toResponse" class="btn">回复</van-button>
                                </div>
                            
                            </div>
                        </div>
                    </div>

                </van-tab>

                <van-tab title="全部评价">
                    <div class="btn_div">
                        <!-- 时间段 -->
                        <div class="chooseTime" v-if="showChooseTime">
                            {{chooseTime}}
                            <button class="closeBtn" @click="showChooseTime=!showChooseTime">
                                <van-icon name="cross" />
                            </button>
                        </div>
                        <button class="searchBtn" :class="{active:btnActive2 == 0}" @click="changeStatus2(0)">全部{{allReply}}</button>
                        <button class="searchBtn" :class="{active:btnActive2 == 5}" @click="changeStatus2(5)">五星{{allFive}}</button>
                        <button class="searchBtn" :class="{active:btnActive2 == 4}" @click="changeStatus2(4)">四星{{allFour}}</button>
                        <button class="searchBtn" :class="{active:btnActive2 == 3}" @click="changeStatus2(3)">三星{{allThree}}</button>
                        <button class="searchBtn" :class="{active:btnActive2 == 2}" @click="changeStatus2(2)">二星{{allTwo}}</button>
                        <button class="searchBtn" :class="{active:btnActive2 == 1}" @click="changeStatus2(1)">一星{{allOne}}</button>
                    </div>
                    <van-radio-group v-model="allRadio" direction="horizontal" class="selectRadio">
                        <van-radio name="1">有内容的评价</van-radio>
                        <van-radio name="2">有图片的评价</van-radio>
                    </van-radio-group>

                     <!-- 评论区 -->
                     <div class="list">
                        <div class="item" v-for="item in reply" :key="item.id">
                            <div class="item_header">
                                <div class="left">
                                    <!-- <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""> -->
                                    <van-image
                                            round
                                            width="1rem"
                                            height="1rem"
                                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                            fit="cover"
                                            class="card_img"
                                    />
                                    <div class="username">
                                        <p>匿名用户</p>
                                        <p>{{item.replytime}}</p>
                                    </div>
                                </div>
                                <div class="right" @click="todetail(item.id)">
                                    <p>详情
                                        <van-icon name="arrow" />
                                    </p>
                                </div>
                            </div>
                            <div class="item_main">
                                <p class="lightFont">
                                    商家：<van-rate v-model="item.score" />
                                </p>
                                <p class="lightFont">
                                    推荐：{{item.recommend}}
                                </p>
                                <p>
                                    <!-- 评论 -->
                                    {{item.Comments}}
                                </p>
                                <ul class="item_imgList">
                                    <li>
                                        <img :src="item.src1" alt="" class="item_img">
                                        <!-- <van-image
                                            width="10rem"
                                            height="10rem"
                                            fit="contain"
                                            :src="item.src1"
                                        /> -->
                                    </li>
                                    <li>
                                        <img :src="item.src2" alt="" class="item_img">
                                    </li>
                                    <li>
                                        <img :src="item.src3" alt="" class="item_img">
                                    </li>
                                    <li>
                                        <img :src="item.src4" alt="" class="item_img">
                                    </li>
                                </ul>
                                <div class="storeResp" v-if="item.replyText">
                                    <p class="replytime">
                                        <span>商家回复：</span>
                                        <span>{{item.replyTime}}</span>
                                    </p>
                                    <p>
                                        {{item.replyText}}
                                    </p>
                                </div>
                                <div class="respBtn" v-else>  
                                    <van-button color="#ff6e53" plain  @click="toResponse" class="btn">回复</van-button>
                                </div>
                            
                            </div>
                        </div>
                    </div>

                </van-tab>
            </van-tabs>
        </div>

        
        

    </div>
</template>

<script>
import HeaderView from '@/components/BS/header2View.vue';
import {replyAxios} from '@/https/reply'
    export default{
    data() {
        return {
            btnActive:0,    //点击了哪个星星
            btnActive2:0,   //点击了哪个星星
            chooseTime:'2021-11-16至2021-11-10',
            showChooseTime:true,
            score:4.5,      //1.后台计算，90天内平均评论几星
            active:0,        //2.tab选项卡，选择未回复评论或全部评论
            noReply:'360',  //3.后台统计，未回复的评论数量，12个查询按钮+2个搜索单选按钮(有内容的评价和有图片的评价)
            noFive:34,      
            noFour:4,
            noThree:21,
            noTwo:32,
            noOne:123,
            noRadio:1,      //单选按钮，有内容的评价或有图片的评价
            allReply:'331',  //4.后台统计，所有的评论数量
            allFive:34,
            allFour:4,
            allThree:21,
            allTwo:32,
            allOne:123,
            allRadio:1,      //单选按钮，有内容的评价或有图片的评价
            reply:[     //评论
                {
                    id:1,   //1.id
                    replytime:'2021-09-25', //2.后台提供，评论时间
                    score:4 ,//3.后台提供，每个评论的评分
                    recommend:'牛肉拌面、红烧狮子头、西湖醋鱼、白灼小河虾、清蒸黄花鱼', //4.评论推荐
                    Comments:'一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。', //5.评论内容
                    src1:'https://img01.yzcdn.cn/vant/cat.jpeg', //6.图片地址
                    src2:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src3:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src4:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    replyText:'亲爱的顾客,感谢您对我们店铺的支持和喜爱,真的很抱歉没有让您100%满意。',
                    replyTime:'2022-10-1'
                },
                {
                    id:2,
                    replytime:'2021-09-25', 
                    score:2 ,
                    recommend:'牛肉拌面、红烧狮子头、西湖醋鱼、白灼小河虾、清蒸黄花鱼', 
                    Comments:'一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。', 
                    src1:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src2:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src3:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src4:'https://img01.yzcdn.cn/vant/cat.jpeg'
                },
                {
                    id:3,
                    replytime:'2021-09-25', 
                    score:5 ,
                    recommend:'牛肉拌面、红烧狮子头、西湖醋鱼、白灼小河虾、清蒸黄花鱼', 
                    Comments:'一如既往的不错，比较清淡，适合南方人口味，我堂食买的一样。', 
                    src1:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src2:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src3:'https://img01.yzcdn.cn/vant/cat.jpeg',
                    src4:'https://img01.yzcdn.cn/vant/cat.jpeg'
                },
            ],
           
        };
    },
    created(){
        replyAxios(1,4)
        .then(
            res=>{
                console.log(res)
            }
        )
        .catch(
            err=>{
                console.log(err)
            }
        )
    },
    methods: {
        changeStatus(number){
            this.btnActive = number;
        },
        changeStatus2(number){
            this.btnActive2 = number;
        },
        toMore(){
            this.$router.push('./MoreData')
        },
        selectDate(){
            this.$router.push('./SelectDate')
        },
        todetail(id){
            this.$router.push({
                path:'./ShowDetail',
                query:{
                    detailId:id
                }
            })
        },
        toResponse(){
            this.$router.push('./StoreNewResponse')
        },
        toMyReply(){
            this.$router.push('./MyReply')
        },
        router(){
            this.$router.push('/tar')
        }
    },
    components: { 
        HeaderView 
    }
}
</script>

<style scoped>
    /* *{
        border:1px solid red;
    } */
    .box{
        width: 100%;
        min-height: 100vh;
        background: #F2F2F2;
    }
    .header_box_main{
        width: 200px;
        text-align: center;
        margin:0 auto;
    }
    ::v-deep .van-icon-calendar-o:before {
    content: '\e67e';
    font-size:25px;
    margin-right:10px;
    }
    .left{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .username{
       height: 30px;
    }
    .table_div{
        height: 50px;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
   .score{
    color: red;
    font-size: 20px;
    margin: 5px 10px;
   }
   .score_text{
    font-size: 12px;
    margin: 0;
    padding: 0;
   }
   .more{
    float: right;
   }
   .select_div{
    height: auto;
    background:white;
    margin-top:10px;
   }
   .searchBtn{
    width: 100px;
    height: 20px;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 13px;
    background: none;
    margin:5px;
   }
   .btn_div{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
   }
   .chooseTime{
    width: 99%;
    margin: 0 auto;
    background: #ffffdb;
    color: black;
    font-size: 16px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
   }
   .selectRadio{
    font-size: 12px;
    margin: 5px;
    padding: 10px;
   }
   .list{
    width: auto;
    height: auto;
    padding-bottom: 20px;
    background: #f5f5f5;
    padding-top: 10px;
   }
   .item{
    /* height: 370px; */
    margin-top: 15px;
   }
   .item_header{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
    background: white;
    padding: 10px;
   }
   .card_img{
    margin: 10px;
    display: inline-block;
   }
  p{
    margin: 0;
    padding:0;
  }
  .item_main{
    background: white;
    height: 300px;
    padding: 10px;
    font-size: 14px;
  }
  .lightFont{
    font-size: 12px;
    color:#999999;
    margin-bottom:5px;
  }
  .respBtn{
    /* width:100%; */
    height:50px;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    background: white;
  }
  .storeResp{
    border-radius: 10px;
    background: #f9f9f9;
    margin: 10px auto;
  }
  .replytime{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  ul{
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
  }
  li{
    width: 22%;
    height: auto;
  }
  .active{
    border: 1px solid red;
    color: red;
  }
  .item_img{
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .btn{
    width: 100px;
    height: 30px;
  }

</style>



